<template>
  <div>
    <!-- 导航栏 -->
    <navbar :name="name" :color="color"></navbar>
    <!-- 轮播图 -->
    <swiper :images="images"></swiper>
    <!-- 四个宫格 -->
    <ul class="grid">
      <li v-for="(item, index) in grids" :key="index">
        <van-image :src="item.image_src" />
      </li>
    </ul>
    <!-- 楼层数据 -->
    <ul>
      <li v-for="(item, index) in goods_list" :key="index">
        <van-image :src="item.floor_title.image_src" />
        <div class="goods">
          <div class="goods_left">
            <van-image width="" :src="item.product_list[0].image_src" />
          </div>
          <div class="goods_right">
            <div v-for="(item2, i2) in item.product_list" :key="i2">
              <img
                v-if="i2 !== 0"
                :src="item.product_list[i2].image_src"
              />
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar.vue";
import Swiper from "@/components/Swiper.vue";
export default {
  components: {
    navbar: NavBar,
    swiper: Swiper,
  },

  data() {
    return {
      name: "购物街", //标题
      color: "#2b85e4", //nabbar  背景色
      images: [], //轮播图图片
      grids: [], //宫格数据
      goods_list: [], //楼层数据
    };
  },

  methods: {
    // 轮播图数据
    async swiper() {
      const { data: res } = await this.$axios.get("/v1/home/swiperdata");
      if (res.meta.status !== 200) return this.$toast();
      this.images = res.message;
      window.sessionStorage.setItem("banner", JSON.stringify(res.message));
    },
    // 宫格数据
    async grid() {
      const { data: res } = await this.$axios.get("/v1/home/catitems");
      if (res.meta.status !== 200) return this.$toast();
      this.grids = res.message;
    },
    // 楼层数据
    async goods_fools() {
      const { data: res } = await this.$axios.get("/v1/home/floordata");
      if (res.meta.status !== 200) return this.$toast();
      console.log(res.message);
      this.goods_list = res.message;
    },
  },

  created() {
    this.grid();
    this.goods_fools();
    if (JSON.parse(sessionStorage.getItem("banner")) !== null) {
      this.images = JSON.parse(sessionStorage.getItem("banner"));
    } else {
      this.swiper();
    }
  },
};
</script> 

<style lang="scss" scoped>
.van-nav-bar {
  background-color: #ff9c35;
  color: white;
}
// 四个宫格
.grid {
  display: flex;
  width: 100%;
  justify-content: space-evenly;
}
// 楼层数据
.goods {
  width: 100%;
  display: flex;
  .goods_left {
    display: flex;
    width: 30em;
  }
  .goods_right {
    width: 30em;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    height: 100px;
   img {
      // max-width: 100%;
      width: 233px;
      height: auto;
    }
  }
}
</style>